<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Layer</title>
    <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="./static/css/demo.css">
    <style>
        .layui-btn {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-tab-item layui-show site-demo">
        <div class="layui-main" style="margin-top: 20px">
            <button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
            <button class="layui-btn demo" data-type="test2">Confirm</button>
            <button class="layui-btn demo" data-type="test3">Msg</button>
            <button class="layui-btn demo" data-type="test4">Tips</button>
            <button class="layui-btn demo" data-type="test5">Page</button>
            <button class="layui-btn demo" data-type="test6">Iframe</button>
            <button class="layui-btn demo" data-type="test7">Prompt</button>
            <button class="layui-btn demo" data-type="test8">Tab</button>
            <a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>

            <div id="test11111" style="display: none;padding: 20px;">
                123
            </div>

            <div class="clearfix layer-area" id="chutiyan" style="margin-top: 20px">
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test1">初体验</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test2">第三方扩展皮肤</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test3">询问层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test4">提示层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test5">墨绿深蓝风</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test6" style="_display:none;">捕获页</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test7">页面层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test8">自定页</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test9">tips层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test10">iframe层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test111">iframe窗</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test12">加载层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test13">loading层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test14">小tips</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test15">prompt层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test16">tab层</a>
                <a class="layui-btn layui-btn-primary" href="javascript:;" id="test17">相册层</a>
                <a class="layui-btn layui-btn-primary" href="http://www.layui.com/demo/layim.html"
                   target="_blank">WebIM</a>
            </div>

            <ul class="layer_notice">
                <li><a href="http://fly.layui.com/jie/5366/" target="_blank">1. layer 系列常见问题的处理和相关实用干货集锦</a></li>
                <li><a href="https://github.com/sentsin/layer/blob/master/CHANGELOG.md" target="_blank">2. layer
                    所有版本完整更新日志</a></li>
                <li><a href="http://fly.layui.com/jie/2461.html" target="_blank">3. 关注 layui 微信公众号，随时随地获取最新动态</a></li>
            </ul>
        </div>
    </div>
</div>
<script src="./plugins/layui/layui.js"></script>
<script>
  layui.use('layer', function () {
    var $ = layui.jquery,
        layer = layui.layer; //独立版的layer无需执行这一句

    //触发事件
    var active = {
      test: function () {
        parent.layer.alert('layui初体验');
      }
      , test2: function () {
        parent.layer.confirm('吃什么会变丑？', {
          btn: ['藕', '屎'] //按钮
        }, function () {
          parent.layer.msg('吃 藕 丑', {icon: 1});
        }, function () {
          parent.layer.msg('哈哈哈', {
            time: 20000, //20s后自动关闭
            btn: ['你最美', '你最帅']
          });
        });
      }
      , test3: function () {
        parent.layer.msg('玩命提示中');
      }
      , test4: function () {
        parent.layer.tips('Hi，美眉', this, {tips: 1});
      }
      , test5: function () {
        parent.layer.open({
          title: '更新论坛信息',
          type: 1,
          skin: 'layui-layer-rim',
          area: ['500px', '580px'],
          content: $('#test11111')
        });
      }
      , test6: function () {
        parent.layer.open({
          type: 2
          , content: 'http://fly.layui.com/'
          , area: ['375px', '500px']
          , maxmin: true
        });
      }
      , test7: function () {
        parent.layer.prompt({title: '输入任何口令，并确认', formType: 1}, function (pass, index) {
          parent.layer.close(index);
          parent.layer.prompt({title: '随便写点啥，并确认', formType: 2}, function (text, index) {
            parent.layer.close(index);
            parent.layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
          });
        });
      }
      , test8: function () {
        parent.layer.tab({
          area: ['600px', '300px'],
          tab: [{
            title: 'TAB1',
            content: '内容1'
          }, {
            title: 'TAB2',
            content: '内容2'
          }, {
            title: 'TAB3',
            content: '内容3'
          }]
        });
      }
    };
    $('.demo').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });


    $('#test1').click(function () {
//      layer.alert('见到你真的很高兴', {icon: 6});  icon: 6 =>笑脸 应用场景 修改，或者某事成功时
//      layer.alert('见到你不开心', {icon: 5}); //icon: 5 =>哭脸 应用场景 修改，或者某事失败时
//      layer.alert('给你的小心心上一把锁', {icon: 4}); //icon: 4 =>锁
//      layer.alert('一脸疑问', {icon: 3}); //icon: 3 =>疑问  应用场景 你确定要这样做xxxx吗？
//      layer.alert('感叹', {icon: 2}); //icon: 2 =>叹号  应用场景 修改，或者某事失败时
      parent.layer.alert('对号', {icon: 1}); //icon: 1 =>对号  应用场景 修改，或者某事成功时
    })
    ////第三方扩展皮肤
    $('#test2').click(function () {
      parent.layer.alert('内容', {
        icon: 1, //icon有六个值 具体代表值同上
        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
      })
    })


////询问框
    $("#test3").click(function () {
      parent.layer.confirm('您是如何看待前端开发？', {
        btn: ['重要', '奇葩'] //按钮
      }, function () {
        parent.layer.msg('的确很重要', {icon: 1});
      }, function () {
        parent.layer.msg('也可以这样', {
          time: 20000, //20s后自动关闭
          btn: ['明白了', '知道了']
        });
      });
    })

//提示层
    $("#test4").click(function () {
      parent.layer.msg('玩命提示中');
    })

////墨绿深蓝风
    $("#test5").click(function () {
      parent.layer.alert('墨绿风格，点击确认看深蓝', {
        skin: 'layui-layer-molv' //样式类名
        , closeBtn: 0
      }, function () {
        parent.layer.alert('偶吧深蓝style', {
          skin: 'layui-layer-lan'
          , closeBtn: 0
          , anim: 1 //动画类型  4 左方翻转一下 3左方直接过来 2从下方过来 1 从上方过来
        });
      });
    })

////捕获页
    $('#test6').click(function () {
      parent.layer.open({
        type: 1,
        shade: false,
        title: false, //不显示标题
        content: $('.layer_notice'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        cancel: function () {
          layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon: 6});
        }
      });
    })

////页面层
    $('#test7').click(function () {
      parent.layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        area: ['420px', '240px'], //宽高
        content: 'html内容'
      });
    })

////自定页
    $("#test8").click(function () {
      parent.layer.open({
        type: 1,
        skin: 'layui-layer-demo', //样式类名
        closeBtn: 0, //不显示关闭按钮
        anim: 2,
        shadeClose: true, //开启遮罩关闭
        content: '成本的是加班句 只需尽快答复你'
      });
    })

////tips层
    $("#test9").click(function () {
//      layer.tips('Hi，我是tips', '吸附元素选择器，如#id');
      parent.layer.tips('Hi，我是tips', '#test9');

    })
////iframe层
    $("#test10").click(function () {
      parent.layer.open({
        type: 2,
        title: 'layer mobile页',
        shadeClose: true,
        shade: 0.8,
        area: ['380px', '90%'],
        content: 'mobile/' //iframe的url
      });
    })

////iframe窗
    $("#test11").click(function () {
      parent.layer.open({
        type: 2,
        title: false,
        closeBtn: 0, //不显示关闭按钮
        shade: [0],
        area: ['340px', '215px'],
        offset: 'rb', //右下角弹出
        time: 2000, //2秒后自动关闭
        anim: 2,
        content: ['form.html', 'no'], //iframe的url，no代表不显示滚动条
        end: function () { //此处用于演示
          layer.open({
            type: 2,
            title: '很多时候，我们想最大化看，比如像这个页面。',
            shadeClose: true,
            shade: false,
            maxmin: true, //开启最大化最小化按钮
            area: ['893px', '600px'],
            content: '//fly.layui.com/'
          });
        }
      });
    })

////加载层
    $("#test12").click(function () {
//      var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
      //关闭加载层
      parent.layer.load();
//此处演示关闭
      setTimeout(function () {
        parent.layer.closeAll('loading');
      }, 2000);
      //加载层-风格2
//      layer.load(1);
////此处演示关闭
//      setTimeout(function(){
//        layer.closeAll('loading');
//      }, 2000);
//
////加载层-风格3
//      layer.load(2);
////此处演示关闭
//      setTimeout(function(){
//        layer.closeAll('loading');
//      }, 2000);
//
////加载层-风格4
//      layer.msg('加载中', {
//        icon: 16
//        ,shade: 0.01
//      });
    })

////loading层
    $("#test13").click(function () {
      var index = parent.layer.load(1, {
        shade: [0.1, '#fff'] //0.1透明度的白色背景
      });
      setTimeout(function(){
        layer.closeAll('loading');
      },2000)
    })

////小tips
    $("#test14").click(function () {
      parent.layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', {
        tips: [1, '#3595CC'],
        time: 4000
      });
    })

////prompt层
    $("#test15").click(function () {
      parent.layer.prompt({title: '输入任何口令，并确认', formType: 1}, function (pass, index) {
        parent.layer.close(index);
        parent.layer.prompt({title: '随便写点啥，并确认', formType: 2}, function (text, index) {
          parent.layer.close(index);
          parent.layer.msg('演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text);
        });
      });
    })

////tab层
    $("#test16").click(function () {
      parent.layer.tab({
        area: ['600px', '300px'],
        tab: [{
          title: 'TAB1',
          content: '内容1'
        }, {
          title: 'TAB2',
          content: '内容2'
        }, {
          title: 'TAB3',
          content: '内容3'
        }]
      });
    })

////相册层
    $("#test17").click(function () {
      $.getJSON('test/photos.json?v=' + new Date, function (json) {
        parent.layer.photos({
          photos: json //格式见API文档手册页
          , anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
        });
      });
    })


  });
</script>
</body>
</html>